<template>
  <div>
    <img src="../../img/dl.png" alt="" class="img">
    <van-form @submit.prevent="login">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
     <span v-if="!isUsernameValid" style="color: red;">用户名不合法</span>
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <span v-if="!isPasswordValid" style="color: red;">密码不合法</span>
  </van-cell-group>
  <div>
    <input type="text" placeholder="请输入验证码" class="yzm">
    <button @click="getVerificationCode" :disabled="isSending">获取验证码</button>
    <span v-if="isSending">验证码将在 {{ countDown }} 秒后重新发送</span>
  </div>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" :disabled="!isFormValid">
      登录
    </van-button>
    <van-button round block type="primary" native-type="submit" class="zc" @click="zhu()">
      注册
    </van-button>
  </div>
  <van-checkbox v-model="inpbtn" @click="yes" class="checkbox">
          <span class="yi">
            已阅读并同意<a href="">《妙手医生服务协议》</a>
            和<a href="">《妙手医生隐私政策》、</a><a href="">《妙手医生儿童个人信息保护规则》</a>
          </span>
        </van-checkbox>
</van-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { register } from 'module';

const username = ref('');
const password = ref('');
const router = useRouter();
const usernameRegex = /^[a-zA-Z0-9_]{4,20}$/;
const passwordRegex = /^[a-zA-Z0-9_]{6,20}$/;

const isUsernameValid = computed(() => usernameRegex.test(username.value));
const isPasswordValid = computed(() => passwordRegex.test(password.value));
const isFormValid = computed(() => isUsernameValid.value && isPasswordValid.value);

const login = async () => {
  if (!isFormValid.value) return;
  try {
    const response = await axios.post('/api/login', {
      username: username.value,
      password: password.value
    });
    if (response.data.success) {
      // 登录成功，跳转到主页
      router.push('/home');
    } else {
      console.error('登录失败:', response.data.message);
    }
  } catch (error) {
    console.error('登录错误:', error);
  }
};
// 存储用户输入的手机号
const phoneNumber = ref('');
// 标识是否正在发送验证码
const isSending = ref(false);
// 倒计时秒数
const countDown = ref(0);
// 存储从后端获取的验证码
const verificationCode = ref('');

const getVerificationCode = async () => {
  if (username.value === '') {
    alert('请输入手机号');
    return;
  }
  isSending.value = true;
  try {
    // 发送请求到后端 API 获取验证码
    const response = await axios.post('/api/getVerificationCode', {
      phoneNumber: phoneNumber.value
    });
    // 验证码在 response.data.code 中
    verificationCode.value = response.data.code;
    countDown.value = 60; 
    const timer = setInterval(() => {
      countDown.value--;
      if (countDown.value === 0) {
        clearInterval(timer); 
        isSending.value = false;
      }
    }, 1000);
  } catch (error) {
    console.error('获取验证码失败:', error);
    isSending.value = false;
  }
};
const zhu=()=>{
  router.push('/register')
}
// 监听确认框状态
const inpbtn = ref(false)

const yes = () => {
  inpbtn.value = true
  console.log(inpbtn.value)
}
</script>
<style >
.yzm{
  width: 200px;
  height: 40px;
  margin-left: 80px;
  margin-top: 30px;
  border: 1px solid #ccc;
}
.zc{
  margin-top: 30px;
}
.img{
  width: 100%;
  height: 300px;
}
</style>